<template>
  <div class="default-layout">
    <HeaderPromotionBanner
      v-show="showBanner"
      @close="closeBanner"
      :linkUrl="linkUrl"
    ></HeaderPromotionBanner>
    <Top></Top>
    <template v-if="shouldShowHeader">
      <Header>导航栏</Header>
    </template>
    <main style="min-height: 135vh">
      <!-- 必须包含这个 -->
      <router-view />
      <GlobalComparisonDialog ref="globalDialog" />
    </main>
    <Footer>页脚</Footer>
    <SideToolbar></SideToolbar>
  </div>
</template>
<script setup lang="ts">
import { ref, computed, provide } from "vue";
import { useRoute } from "vue-router";
import GlobalComparisonDialog from "@/components/GlobalComparisonDialog.vue";

import HeaderPromotionBanner from "@/components/common/Promotion/HeaderPromotionBanner.vue";
import Top from "@/components/layout/Top.vue";
import Header from "@/components/layout/Header.vue";
import Footer from "@/components/layout/Footer.vue";
import SideToolbar from "@/components/ui/SideToolbar.vue";

console.log("default layout");
const route = useRoute();
const showBanner = ref(true);
const linkUrl = "https://www.baidu.com";

const globalDialog = ref();
// 提供全局方法
provide("showComparisonDialog", async (item: any) => {
  console.log("showComparisonDialog", item);
  if (globalDialog.value) {
    return await globalDialog.value.open(item);
  }
  return false;
});
// 计算属性判断是否显示Header
const shouldShowHeader = computed(() => {
  return route.meta.showHeader !== false; // 默认显示，除非明确设置为false
});
const closeBanner = () => {
  console.log("close banner");
  showBanner.value = false;
  console.log(showBanner.value);
};
</script>
<style scoped lang="scss">
.default-layout {
  min-height: 100vh;
  width: 100%;
}
</style>
